<template>
  <div>
    <br>
    <div>
      隐藏的上传组件
      <el-upload
        action="http://127.0.0.1:8000/upload/"
        :show-file-list="false"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        multiple
      >
        <i ref='act'></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img
          width="100%"
          :src="dialogImageUrl"
          alt=""
        >
      </el-dialog>
      <button @click="$refs.act.click()">打开隐藏组件的文件选择窗口</button>
    </div>
    <div><br></div>
    <div>
      显示的上传组件
      <el-upload
        action="http://127.0.0.1:8000/upload/"
        list-type="picture-card"
        :headers="{}"
        :data="{}"
        name="img"
        :show-file-list="true"
        :on-preview="preview"
        :on-success="success"
        :on-error="error"
        :on-progress="progress"
        :on-change="change"
        :before-upload="beforeUpload"
        :before-remove="beforeRemove"
        :on-remove="remove"
      >
        <!-- :http-request="httpRequest" -->
        <!-- <el-upload
      style="margin-top:-20px"
      class="avatar-uploaderfu"
      action="http://127.0.0.1:8000/upload/" // 上传的地址
      list-type="picture-card" // 展示样式, 图片墙
      headers="" //设置上传的请求头部
      data="" //上传时附带的额外参数
      name="img" //上传的文件字段名
      with-credentials //支持发送 cookie 凭证信息
      :show-file-list="false" //是否显示已上传文件列表
      drag //是否启用拖拽上传
      :before-upload="beforeUploadPolicy"
      :on-success="" // 文件上传成功时的钩子
      :on-error // 文件上传失败时的钩子
      :on-progress // 文件上传时的钩子
      on-change //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
      before-remove // 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
      on-remove 文件列表移除文件时的钩子
      http-request // 覆盖默认的上传行为，可以自定义上传的实现
      limit // 最大允许上传个数
      on-exceed // 文件超出个数限制时的钩子
    >  -->
        <i class="el-icon-plus"></i>
      </el-upload>

    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    preview(file) {
      // 预览
      console.log('preview', arguments)
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    success(message, file, files) {
      // 上传成功
      console.log('success', arguments)
      return file
    },
    error() {
      // 上传失败
      console.log('error', arguments)
    },
    progress(event) {
      // 上传开始 到 完成 之间, 可以显示 上传进度
      // event.percent 是上传的百分比
      console.log('progress', arguments)
    },
    change() {
      // 列表改变
      console.log('change', arguments)
    },
    beforeUpload() {
      // 上传前
      console.log('beforeUpload', arguments)
    },
    beforeRemove() {
      // 删除前
      console.log('beforeRemove', arguments)
    },
    remove() {
      // 删除
      console.log('remove', arguments)
    },
    httpRequest() {
      // 自定义上传
      console.log('httpRequest', arguments)
    }
  }
}
</script>
